import './App.css';
import { Redirect, Route, Switch } from 'react-router-dom'
// 引入css
import './App.css'
// 引入路由组件
// React基本使用
import JSXBaseDemo from './pages/baseUse/JSXBaseDemo'
import ConditionDemo from './pages/baseUse/ConditionDemo'
import ListDemo from './pages/baseUse/ListDemo'
import EventDemo from './pages/baseUse/EventDemo'
import FormDemo from './pages/baseUse/FormDemo'
import PropsDemo from './pages/baseUse/PropsDemo'
import StateDemo from './pages/baseUse/StateDemo'
// React高级特性
import UnControlledDemo from './pages/advancedUse/UnControlledDemo'
import PortalsDemo from './pages/advancedUse/PortalsDemo'
import ContextDemo from './pages/advancedUse/ContextDemo'
import LazyDemo from './pages/advancedUse/LazyDemo'
import PureComponentDemo from './pages/advancedUse/PureComponentDemo'
import HOCDemo from './pages/advancedUse/HOCDemo'
import RenderPropDemo from './pages/advancedUse/RenderPropDemo'
// Redux
import CountPureReactVersion from './pages/reduxUse/PureReactVersion/Count'
import CountMiniReduxVersion from './pages/reduxUse/MiniReduxVersion/components/Count'
import CountTotalReduxVersion from './pages/reduxUse/TotalReduxVersion/components/Count'
import CountAsyncActionVersion from './pages/reduxUse/AsyncActionVersion/components/Count'
// react-redux
import store_base from './pages/react-reduxUse/BaseVersion/redux/store'
import CountContainer from './pages/react-reduxUse/BaseVersion/containers/CountContainer'
import store_optimize from './pages/react-reduxUse/OptimizeVersion/redux/store'
import CountContainerOptimize from './pages/react-reduxUse/OptimizeVersion/containers/Count'
// 数据共享版
import store_share from './pages/react-reduxUse/DataShareVersion/redux/store'
import CountShareData from './pages/react-reduxUse/DataShareVersion/containers/Count'
import Person from './pages/react-reduxUse/DataShareVersion/containers/Person'
import { Provider } from 'react-redux'
// 引入一般组件
import Header from './components/Header'
import MyNavLink from './components/MyNavLink'

function App() {
  return (
    <div className="App">
      <div className="row">
        <div className="col-xs-offset-2 col-xs-8">
          <Header />
        </div>
      </div>
      <div className="row">
        <div className="col-xs-2 col-xs-offset-2">
          <h4>React 基本使用</h4>
          <div className="list-group">
            {/* 在React中靠路由链接实现切换组件--编写路由链接 */}
            {/* <Link className="list-group-item" to="/jsxBaseDemo">JSXBaseDemo</Link>
            <Link className="list-group-item" to="/conditionDemo">ConditionDemo</Link> */}
            <MyNavLink to="/jsxBaseDemo">JSX基础</MyNavLink>
            <MyNavLink to="/conditionDemo">条件判断</MyNavLink>
            <MyNavLink to="/listDemo">列表渲染</MyNavLink>
            <MyNavLink to="/eventDemo">事件</MyNavLink>
            <MyNavLink to="/formDemo">表单</MyNavLink>
            <MyNavLink to="/propsDemo">父子组件</MyNavLink>
            <MyNavLink to="/stateDemo">setState</MyNavLink>
          </div>
          <h4>React 高级特性</h4>
          <div className="list-group">
            <MyNavLink to="/uncontrolledDemo">非受控组件</MyNavLink>
            <MyNavLink to="/portalsDemo">Portals</MyNavLink>
            <MyNavLink to="/contextDemo">Context</MyNavLink>
            <MyNavLink to="/lazyDemo">异步组件</MyNavLink>
            <MyNavLink to="/pureComponentDemo">纯组件</MyNavLink>
            <MyNavLink to="/hocDemo">高阶组件</MyNavLink>
            <MyNavLink to="/renderPropDemo">Render Props</MyNavLink>
          </div>
          <h4>Redux 使用</h4>
          <div className="list-group">
            <MyNavLink to="/pureReactVersion">纯React版</MyNavLink>
            <MyNavLink to="/miniReduxVersion">redux精简版</MyNavLink>
            <MyNavLink to="/totalReduxVersion">redux完整版</MyNavLink>
            <MyNavLink to="/asyncActionVersion">异步action版</MyNavLink>
          </div>
          <h4>react-redux 使用</h4>
          <div className="list-group">
            <MyNavLink to="/baseReactReduxVersion">基础版</MyNavLink>
            <MyNavLink to="/optimizeReactReduxVersion">优化版</MyNavLink>
            <MyNavLink to="/dataShareVersion">数据共享版</MyNavLink>
          </div>
        </div>
        <div className="col-xs-6">
          <div className="panel">
            <div className="panel-body">
              {/* 注册路由 */}
              <Switch>
                {/* 基本使用 */}
                <Route path="/jsxBaseDemo" component={JSXBaseDemo} />
                <Route path="/conditionDemo" component={ConditionDemo} />
                <Route path="/listDemo" component={ListDemo} />
                <Route path="/eventDemo" component={EventDemo} />
                <Route path="/formDemo" component={FormDemo} />
                <Route path="/propsDemo" component={PropsDemo} />
                <Route path="/stateDemo" component={StateDemo} />
                {/* 高级特性 */}
                <Route path="/uncontrolledDemo" component={UnControlledDemo} />
                <Route path="/portalsDemo" component={() => { return <PortalsDemo children="Modal 内容" /> }} />
                <Route path="/contextDemo" component={ContextDemo} />
                <Route path="/lazyDemo" component={LazyDemo} />
                <Route path="/pureComponentDemo" component={PureComponentDemo} />
                <Route path="/hocDemo" component={() => { return <HOCDemo testOuterProps="testMyOuterProps" /> }} />
                <Route path="/renderPropDemo" component={() => { return <RenderPropDemo testOuterProps="testMyOuterProps" /> }} />
                {/* Redux */}
                <Route path="/pureReactVersion" component={CountPureReactVersion} />
                <Route path="/miniReduxVersion" component={CountMiniReduxVersion} />
                <Route path="/totalReduxVersion" component={CountTotalReduxVersion} />
                <Route path="/asyncActionVersion" component={CountAsyncActionVersion} />
                {/* react-redux */}
                <Route path="/baseReactReduxVersion" component={() => { return <CountContainer store={store_base} /> }} />
                <Route path="/optimizeReactReduxVersion" component={() => { return <CountContainerOptimize store={store_optimize} /> }} />
                <Route path="/dataShareVersion" component={() => { return <Provider store={store_share}><CountShareData /><hr /><Person /></Provider> }} />
                {/* 默认匹配的路由 */}
                <Redirect to="/jsxBaseDemo" />
              </Switch>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

export default App;
